<div class="" [ngClass]="['bg' + default, 'text' + contrastInv]">
	<div class="container grid grid-cols-12 mx-auto">
		<div
			class="flex flex-col justify-center col-span-12 align-middle bg-no-repeat bg-cover bg-gray-700 lg:col-span-6 lg:h-auto"
			style="
				background-image: url('https://source.unsplash.com/random/640x480');
				background-position: center center;
				background-blend-mode: multiply;
				background-size: cover;
			"
		>
			<div class="flex flex-col items-center p-8 py-12 text-center">
				<span>12 June</span>
				<h1 class="py-4 text-5xl font-bold">
					Lorem, ipsum dolor sit amet consectetur adipisicing.
				</h1>
				<p class="pb-6">
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!
				</p>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 20 20"
					fill="currentColor"
					class="w-7 h-7"
				>
					<path
						fill-rule="evenodd"
						d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
						clip-rule="evenodd"
					/>
				</svg>
			</div>
		</div>
		<div
			class="flex flex-col col-span-12 p-6 divide-y lg:col-span-6 lg:p-10"
			[ngClass]="['divide' + neutral]"
		>
			<div class="pt-6 pb-4 space-y-2">
				<span>12 June</span>
				<h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
				<a
					rel="noopener noreferrer"
					href="#"
					class="inline-flex items-center py-2 space-x-2 text-sm"
					[ngClass]="['text' + primary]"
				>
					<span class="">Read more</span>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
						class="w-4 h-4"
					>
						<path
							fill-rule="evenodd"
							d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
							clip-rule="evenodd"
						/>
					</svg>
				</a>
			</div>
			<div class="pt-6 pb-4 space-y-2">
				<span>12 June</span>
				<h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
				<a
					rel="noopener noreferrer"
					href="#"
					class="inline-flex items-center py-2 space-x-2 text-sm"
					[ngClass]="['text' + primary]"
				>
					<span class="">Read more</span>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
						class="w-4 h-4"
					>
						<path
							fill-rule="evenodd"
							d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
							clip-rule="evenodd"
						/>
					</svg>
				</a>
			</div>
			<div class="pt-6 pb-4 space-y-2">
				<span>12 June</span>
				<h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
				<a
					rel="noopener noreferrer"
					href="#"
					class="inline-flex items-center py-2 space-x-2 text-sm"
					[ngClass]="['text' + primary]"
				>
					<span class="">Read more</span>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
						class="w-4 h-4"
					>
						<path
							fill-rule="evenodd"
							d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
							clip-rule="evenodd"
						/>
					</svg>
				</a>
			</div>
		</div>
	</div>
</div>
